<template>
  <!-- 列表 -->
  <div
    v-srcollloadmore="srcollloadmore"
    class="list_list"
    ref="scollElement"
    :style="
      height ? ' height: calc(100% - 128px);' : ' height: calc(100% - 90px);'
    "
  >
    <transition-group name="list-complete">
      <div class="list" v-for="(v, i) in list" :key="i">
        <div class="list_div">
          <img
            class="list_img"
            :src="v.logoImage"
            @click="listimgclick(v.logoImage, v.logoName, v.logoId)"
          />
          <div class="xin" v-show="xin">
            <img
              class="list_xin"
              @click.stop="listcollectClick(1, i, v.logoId)"
              v-if="v.collectTag"
              :src="img.xin1"
            />
            <img
              class="list_xin"
              @click.stop="listcollectClick(0, i, v.logoId)"
              v-else
              :src="img.xin"
            />
          </div>
        </div>
        <p class="list_p">{{ v.logoName }}</p>
      </div>
    </transition-group>
    <div v-show="iflistcon" class="list_null">
      <p>没有匹配内容</p>
    </div>
  </div>
</template>
<script>
import mixin from "@/utils/mixin";
import { postLogoHandle } from "@/api/template";

export default {
  //logoId logoImage  logoName  logoTag
  props: [
    "rightlistheight",
    "rightlogoList",
    "logoscrollTop",
    "classifylogo",
    // "logoTotalNumberPages",
    // "logoCurrentPage",
  ],
  watch: {
    rightlogoList(newVal) {
      this.rightlogoList = newVal;
      if (this.rightlogoList.length === 0) {
        this.$refs.scollElement.scrollTop = 0;
        this.iflistcon = true;
      } else this.iflistcon = false;
      this.list = JSON.parse(JSON.stringify(this.rightlogoList));
    },
    logoscrollTop(newVal) {
      if (newVal == 0) this.$refs.scollElement.scrollTop = 0;
    },
    classifylogo(newVal) {
      this.$refs.scollElement.scrollTop = 0;
      if (newVal == 1) this.xin = false;
      else this.xin = true;
      if (window.localStorage.getItem("eplatformpowertype") == 1 && newVal == 0)
        this.height = true;
      else this.height = false;

    },
  },
  mixins: [mixin],

  data() {
    return {
      iflistcon: false,
      height: null,
      list: null,
      xin: true,
    };
  },
  methods: {
    srcollloadmore() {
      this.$datatools.throttle(this.$emit("LogoListPage"), 2000);
    },
    //内容——左——列2——列表——收藏——点击选中
    async listcollectClick(type, i, logoId) {
      if (type == 0) this.list[i].collectTag = true;
      else this.list[i].collectTag = false;
      await postLogoHandle({
        listType: 2,
        userId: window.localStorage.getItem("eplatformid"),
        logoId,
        token: window.localStorage.getItem("eplatformtoken"),
        operationType: type, //0添加,1取消
      });
    },
    listimgclick(value, name, id) {
      let obj = {
        src: value,
        name,
      };
      this.$emit("childValue", obj, id);
    },
    scrollChange() {
      this.$emit("scroll", this.$refs.scollElement.scrollTop);
    },
  },
  created() {
    this.height = this.rightlistheight;
    if (window.localStorage.getItem("eplatformpowertype") == 0)
      this.height = false;
   
  },
  mounted() {
    // 获取指定元素
    this.$refs.scollElement.addEventListener("scroll", this.scrollChange, true);
  },
  beforeDestroy() {
    // 获取指定元素
    this.$refs.scollElement.removeEventListener(
      "scroll",
      this.scrollChange,
      true
    );
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/frame.less";
.list_list {
  overflow-y: auto;
  position: absolute;
  width: 228px;
  margin-top: 20px;
  color: @color2;
  height: calc(100% - 90px);
  .divDFJS();
  &::-webkit-scrollbar {
    width: 0px !important;
  }
  .list_null {
    width: 100%;
    height: 40px;
    .cen();
    font-size: 16px;
  }
  .list {
    float: left;
    position: relative;
    .divDWJ();
    width: 228px;
    margin-bottom: 20px;
    transition: all 1s;
    .list_div {
      width: 100%;
      overflow: hidden;
      border-radius: @radius1;
      .list_img {
        width: 100%;
        height: auto;
        display: block;
      }
      .xin {
        cursor: pointer;
        position: absolute;
        width: 18px;
        height: 18px;
        top: 40px;
        right: 18px;
      }
    }
    .list_p {
      width: 100%;
      margin-top: 6px;
      overflow: hidden;
      .cen();
    }
  }
}
</style>